<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>源辰租房</title>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="css/nprogress.css">
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <link rel="stylesheet" type="text/css" href="css/font-awesome.min.css">
    <link rel="apple-touch-icon-precomposed" href="images/icon/icon.png">
    <link rel="shortcut icon" href="images/icon/favicon.ico">
    <script src="js/jquery-2.1.4.min.js"></script>
    <script src="js/nprogress.js"></script>
    <script src="js/jquery.lazyload.min.js"></script>

    <script src="https://unpkg.com/vue@2.7.14/dist/vue.min.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="https://unpkg.com/element-china-area-data@6.0.0/dist/element-china-area-data.iife.js"></script>
    <script src="js/login.js"></script>
    <script src="js/tenant.js"></script>
    <style>
        .el-form-item__content {
            display: flex;
            width: 750px;
        }
        .el-cascader {
            width: 350px;
        }
        .msg{
            color: red;
        }
        .el-textarea,.el-input {
            width: 380px;
        }
    </style>
</head>
<body class="user-select">
<div id="app">
    <mymain @logined="onlogin">
        <el-form ref="form" :model="houseForm" label-width="80px">
            <el-form-item label="名称">
                <el-input v-model="houseForm.introduce"></el-input>
                <span class="msg">{{errors.introduce}}</span>
            </el-form-item>
            <el-form-item label="面积">
                <el-input v-model="houseForm.area"></el-input>
                <span class="msg">{{errors.area}}</span>
            </el-form-item>
            <el-form-item label="类型">
                <el-select v-model="houseForm.type" placeholder="请选择">
                    <el-option
                            v-for="item in types"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                    </el-option>
                </el-select>
                <span class="msg">{{errors.type}}</span>
            </el-form-item>
            <el-form-item label="图片">
                <el-upload style="width: 380px;display: inline"
                           action="upload2"
                           list-type="picture-card"
                           :on-success="handleAvatarSuccess"
                           :before-upload="beforeAvatarUpload"
                           :on-preview="handlePictureCardPreview"
                           :on-remove="handleRemove"
                           multiple
                >
                    <i class="el-icon-plus"></i>
                </el-upload>
                <span class="msg" style="margin: auto 0;">{{errors.imgUrls}}</span>
                <img v-for="i in OriginalImgUrls" :src="i">
                <el-dialog :visible.sync="dialogVisible">
                    <img width="100%" :src="dialogImageUrl" alt="">
                </el-dialog>
            </el-form-item>
            <el-form-item label="价格">
                <el-input v-model="houseForm.price"></el-input>
                <span class="msg">{{errors.price}}</span>
            </el-form-item>
            <el-form-item label="规模">
                <el-input v-model="houseForm.scale"></el-input>
                <span class="msg">{{errors.scale}}</span>
            </el-form-item>
            <el-form-item label="省/市/区">
                <el-cascader
                        class="long"
                        size="large"
                        :options="pcaTextArr"
                        v-model="region"
                >
                </el-cascader>
            </el-form-item>
            <el-form-item label="详细地址">
                <el-input type="textarea" v-model="houseForm.address"></el-input>
                <span class="msg">{{errors.address}}</span>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="addHouse">立即发布</el-button>
                <el-button @click="resetForm()">重置</el-button>
            </el-form-item>
        </el-form>
    </mymain>
</div>
<script>
    var v = new Vue({
        el: "#app",
        data: {
            user: {},
            houseForm: {
                province: "北京市",
                city: "市辖区",
                region: "朝阳区",
                introduce: '',
                scale: '',
                price: '',
                guestId: 0,
                masterId: "",
                area: "",
                address: '',
                type: '整租',
                imgUrls: [],
            },
            pcaTextArr: elementChinaAreaData.pcaTextArr,
            types: [{
                value: '整租',
                label: '整租'
            }, {
                value: '合租',
                label: '合租'
            }],
            count: 1,
            dialogImageUrl: '',
            dialogVisible: false,
            OriginalImgUrls:[],
            path: "static/images/houseImg",
            errors: {},
            region: [],
        },
        created(){
            this.region = [this.houseForm.province,this.houseForm.city,this.houseForm.region];
        },
        methods: {
            onlogin(user){
              this.user = user;
            },
            addHouse() {
                this.houseForm.masterId =  this.user.id;
                this.houseForm.province = this.region[0];
                this.houseForm.city = this.region[1];
                this.houseForm.region = this.region[2];
                axios.post("house/save",this.houseForm).then(res=>{
                    if (res.data.code == 1){
                        this.$message(res.data.msg);
                        this.error = {};
                        this.resetForm();
                        location.href="/";
                    } else {
                        // this.$alert(res.data.msg);
                        console.info(res.data.data);
                        this.errors = {};
                        for (let name in this.houseForm) {
                            let errMsg = res.data.data
                                .filter(err=> err.field == name)    // 过滤
                                .map(err=> err.defaultMessage)      // 转换 : {..}=>String
                                .join(",");
                            this.errors[name] = errMsg;
                        }
                    }
                })
            },
            resetForm() {
                this.houseForm = {
                    province: "北京市",
                    city: "市辖区",
                    region: "朝阳区",
                    introduce: '',
                    scale: '',
                    price: '',
                    guestId: 0,
                    masterId: "",
                    area: "",
                    address: '',
                    type: '',
                    imgUrls: [],
                }
            },
            handleRemove(file, fileList) {
                console.log(file, fileList);
            },
            handlePictureCardPreview(file) {
                this.dialogImageUrl = file.url;
                this.dialogVisible = true;
            },
            handleAvatarSuccess(res, file) {
                if (res.code){
                    this.OriginalImgUrls=[];
                    this.houseForm.imgUrls = this.houseForm.imgUrls.concat(res.data);
                }else {
                    this.$alert(res.msg);
                }
            },
            beforeAvatarUpload(file) {
                const isJPG = file.type.indexOf('image')==0;
                const isLt2M = file.size / 1024 / 1024 < 2;

                if (!isJPG) {
                    this.$message.error('上传头像图片只能图片格式!');
                }
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 2MB!');
                }
                return isJPG && isLt2M;
            }
        },
    })
</script>

<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.ias.js"></script>
<script src="js/scripts.js"></script>
</body>
</html>